<template>
  <s-form ref="form" :value="formValue" style="width: 100%; height: 100%">
    <s-form-item
      size="custom"
      :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
      label="标题"
      name="label"
      :rules="[
        { whitespace: true, required: true, message: '不能为空' },
        { max: 50, message: '最长为50' }
      ]"
    >
      <s-input v-model="formValue.label" placeholder="标题" />
    </s-form-item>
    <s-form-item
      size="custom"
      :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
      label="边框"
      name="bordered"
      :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
    >
      <s-radio
        v-model="formValue.bordered"
        :data="[
          { label: '是', value: '1' },
          { label: '否', value: '0' }
        ]"
      />
    </s-form-item>
    <s-form-item
      size="custom"
      :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
      label="标题位置"
      name="orientation"
      :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
    >
      <s-radio
        v-model="formValue.orientation"
        :data="[
          { label: '左', value: 'left' },
          { label: '右', value: 'right' }
        ]"
      />
    </s-form-item>
    <s-form-item
      size="custom"
      :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
      label="高度"
      name="height"
      :label-width="6"
      :wrapper-width="16"
      :offset-width="2"
      :rules="[
        { whitespace: true, required: true, message: '不能为空' },
        { max: 50, message: '最长为50' }
      ]"
    >
      <s-input v-model="formValue.height" placeholder="高度" />
    </s-form-item>
  </s-form>
</template>
<script>
export default {
  name: 'CardProperty',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      required: false,
      type: Object,
      default: () => {}
    },
    code: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return { formValue: this.value.properties, active: '1' }
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        this.formValue = val.properties
      },
      deep: true
    }
  },
  methods: {
    save(callback) {
      const form = this.$refs.form
      form.validate(
        (values) => {
          callback({
            id: this.value.id,
            type: this.value.type,
            properties: values,
            attrs: {},
            extendAttrs: {}
          })
        },
        (obj) => {}
      )
    }
  }
}
</script>
